<template>
  <div class="CinemaDetail-content">
    <van-nav-bar
      title="幸福蓝海梦幻影城"
      class="navBar"
      left-arrow
      fixed
      placeholder
      z-index="5"
      @click-left="onClickLeft"
    />
    <!-- 头部 -->
    <div class="CinemaDetail-header">
      <div class="header-title">
        <div class="title">幸福蓝海梦幻影城</div>
        <div class="add">秦淮区莫愁路329号越界梦幻城34栋</div>
      </div>
      <div class="header-icon">
        <img
          style="width: 1.5rem; padding: 0.5rem 0 0 1rem"
          src="https://obj.pipi.cn/festatic/fe-trade/public/img/position.ee111616.png"
        />
      </div>
    </div>
    <!-- 电影轮播图 -->
    <div class="swiper-all">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in cinemaList" :key="item.id">
          <img :src="item.img" alt="" />
        </div>
      </div>
    </div>
    <!-- 每个电影的信息 -->
    <div class="movieD">
      <div class="cinema-title">
        <span class="title-nm">
          {{ cinemaInfo.nm }}
        </span>
        <span class="title-sc">
          {{ cinemaInfo.sc }}
          <span class="sc-i">分</span>
        </span>
      </div>
      <div class="cinema-desc">
        {{ cinemaInfo.desc }}
      </div>
    </div>
    <!-- 放映信息 -->
    <div class="show-warp">
      <div class="warp-date">
        <van-tabs line-width = 5rem>
          <van-tab
            v-for="(item, index) in cinemaInfo.shows"
            :title="item.showDate"
            :key="index"
          >
            <van-notice-bar
              :scrollable="false"
              text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
            />
            <div class="warp-listContainer" v-if="cinemaInfo.shows.length">
              
              <div
                class="listContainer-item"
                v-for="(itemInfo, i) in item.plist"
                :key="i"
              >
              
                <div class="item-info">
                  <div class="tiem-str">{{ itemInfo.tm }}</div>
                </div>
                <div class="item-info">
                  <span class="info-lang">
                    {{ `${itemInfo.lang} ${itemInfo.tp}` }}
                  </span>
                  <br/>
                  <span class="info-hall">{{ itemInfo.th }}</span>
                </div>
                <div class="item-info">
                  <div class="price-sellPr">
                    <span class="sellPr-d">￥</span>
                    <span class="sellPr-stone">{{ itemInfo.baseSellPrice }}</span>
                  </div>
                </div>
                
                <div class="item-info">
                  <button class="button">购票</button>
                </div>
              </div>
            </div>
            <van-empty description="今日场次以映完" class="custom-image" v-else />
          </van-tab>
        </van-tabs>
      </div>

      
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import Swiper from "swiper";
import { reqCinemasDeatil } from "@/api";
import "swiper/css/swiper.min.css";
export default {
  name: "CinemaDetail",
  data() {
    return {
      deatil: null,
      cinemaList: [],
      id: 338384,
      cinemaInfo: {},
      activeName: 2,
    };
  },
  methods: {
    // 左上角返回
    onClickLeft() {
      this.$router.go(-1);
      Toast("返回影院列表");
    },
    // 获取影院详情列表
    getCinemaInfo(val) {
      this.cinemaInfo = val;
      console.log(val);
    },
  },
  watch: {
    cinemaList(val) {
      let _this = this;
      this.$nextTick(() => {
        new Swiper(".swiper-all ", {
          directions: "horizontal",
          slidesPerView: 4,
          spaceBetween: 2,
          // freeMode: true,
          centeredSlides: true,
          on: {
            slideChangeTransitionStart: function () {
              _this.getCinemaInfo(val[this.activeIndex]);
            },
          },
        });
      });
    },
  },
  mounted() {
    reqCinemasDeatil(this.id).then(
      (response) => {
        if (response) {
          this.cinemaList = response.data.data.movies;
          this.cinemaInfo = response.data.data.movies[0];
        }
      },
      (error) => {
        alert(error.message);
      }
    );
  },
};
</script>

<style lang="less" scoped>
.CinemaDetail-content {
  overflow: hidden;
  .CinemaDetail-header {
    display: flex;
    margin: 1.3rem 1rem;
    .header-title {
      width: 85%;
      border-right: 0.04rem solid #ccc;
      .title {
        font-size: 1rem;
        line-height: 2rem;
        font-weight: 700;
        color: rgb(63, 62, 62);
        white-space: nowrap;
      }
      .add {
        font-size: 0.7rem;
        white-space: nowrap;
        color: #999;
      }
      .header-icon {
        width: 10%;
      }
    }
  }
  .custom-image image {
    width: 2rem;
    height: 3rem;
  }
  .swiper-all {
    padding: 0.8rem;
    overflow: hidden;
    background: rgba(29, 29, 29, 0.425);
    height: 100%;
    width: 100%;
    padding: 0.8rem;
    .swiper-wrapper {
      height: 7.59rem;
    }
  }
  .movieD {
    text-align: center;
    height: 4.8rem;
    background-color: #fff;
    border-bottom: 0.01rem solid rgb(199, 199, 199);
    line-height: 2.04rem;
    .cinema-title {
      font-weight: 700;
      padding-top: 0.5rem;
      .title-nm {
        font-size: 1.2rem;
      }
      .title-sc {
        color: rgb(255, 160, 72);
        font-size: 1.2rem;
        .sc-i {
          font-size: 0.6rem;
        }
      }
    }
    .cinema-desc {
      color: rgb(139, 139, 139);
      font-size: 0.9rem;
    }
  }
  .listContainer-item {
    display:flex;
    text-align: center;
    height: 4rem;
    .item-info {
      width: 25%;
      text-align: center;
      border-bottom: 0.01rem solid #999;
      .tiem-str {
        font-size: 1rem;
        text-align: center;
        margin-top: 1.3rem;
      }
      .info-lang{
        font-size: 0.5rem;
        color: #999;
        line-height: 2.2rem;
      }
      .info-hall {
        font-size: 0.3rem;
        white-space: nowrap;
        overflow: hidden;
      }
      .price-sellPr {
        color: rgb(253, 167, 69);
        margin-top: 1.3rem;
        .sellPr-d {
          font-size: 0.4rem;
        }
      }
      .button { 
        margin-top: 16%;
        width: 4rem;
        height: 2rem;
        color: white;
        border-width: 0.01rem;
        background: #f0373d;
        text-align: center;
        border-radius: 10%;
      }
    }
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 0.3rem;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    img {
      width: 6rem;
      height: 7.7rem;
    }
  }
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    position: relative;
    transform: scale(1);
    border: 0.2rem solid #fff;
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -1rem;
      transform: translateX(-50%);
      border: 0.4rem solid transparent;
      border-top-color: #fff;
    }
  }
}
</style>